<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <%@ include file="/pages/common/header.jsp" %>
    <style>
        .green {
            color: green !important;
        }

        span.errorMsg {
            color: red;
        }
    </style>
    <script type="text/javascript">
        // 页面加载完成之后
        $(function () {
            // 切换验证码
            $("#kaptcha").click(function () {
                this.src = "${basePath}KaptchaServlet.jpg?d=" + new Date().getTime(); // ?d=" + new Date().getTime()是为了跳过浏览器缓存，从服务器获取新的验证码
                return false;
            });

            // 给注册绑定单击事件
            $("#sub_btn").click(function () {
                // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var usernameText = $("#username").val();
                //2 创建正则表达式对象
                var usernamePatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("用户名不合法！");

                    return false;
                }

                // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var passwordText = $("#password").val();
                //2 创建正则表达式对象
                var passwordPatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("密码不合法！");
                    return false;
                }

                // 验证确认密码：和密码相同
                //1 获取确认密码内容
                var repwdText = $("#repwd").val();
                //2 和密码相比较
                if (repwdText != passwordText) {
                    //3 提示用户
                    $("span.errorMsg").text("确认密码和密码不一致！");

                    return false;
                }

                // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
                var codeText = $("#kaptcha-text").val();

                //去掉验证码前后空格
                // alert("去空格前：["+codeText+"]")
                codeText = $.trim(codeText);
                // alert("去空格后：["+codeText+"]")

                if (codeText == null || codeText == "") {
                    //4 提示用户
                    $("span.errorMsg").text("验证码不能为空！");

                    return false;
                }

                // 去掉错误信息
                $("span.errorMsg").text("");
            });

            $("#username").change(function () {
                $("span.errorMsg").text("");
                let username = $(this).val();
                $.getJSON(
                    "UserServlet",
                    "action=exitsAjaxUsername&username=" + username,
                    function (data) {
                        if (username !== "" && data.exitsAjaxUsername === true) {
                            $("span.errorMsg").text("用户名已存在！");
                            $("span.errorMsg").removeClass("green");
                        } else {
                            $("span.errorMsg").text("用户名可用！");
                            $("span.errorMsg").addClass("green");
                        }
                    }
                )
                return false;
            });
        });
    </script>
</head>
<body>
<center>
    <div>
        <h3>用户注册</h3>
        <span class="errorMsg"></span>
    </div>
    <form action="UserServlet" method="post" id="login-form">
        <input type="hidden" name="action" value="register">
        <table id="login-table">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repassword" id="repwd"></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td>
                    <input type="text" name="kaptcha" id="kaptcha-text" style="width: 40%;">
                    <img id="kaptcha" src="KaptchaServlet.jpg" alt="" style="height: 26px;width: 60px;">
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="注册" id="sub_btn"></td>
            </tr>
        </table>
    </form>
</center>
</body>
</html>